import { Layout, TreeLoading, udp } from '@cscec/udp-ui';
import React, { CSSProperties, useRef } from 'react';
import IndicatorCenterCard from './component/indicatorCenterCard';

/**
 * 指标控件
 */
export default function IndicatorCenter({ gap, list = [], height, style, env }: IProps) {
  const staticsRef = useRef<HTMLDivElement>(null);
  if (env.session === 'ghost-thumb') {
    return <TreeLoading />;
  }

  return (
    <Layout
      outRef={staticsRef}
      direction="row"
      style={{
        position: 'relative',
        height: height ?? (env.session === 'design' ? 150 : '100%'),
        gap: gap ?? 'var(--outer-margin)',
        ...style
      }}
    >
      <IndicatorCenterCard
        data={{
          userInfo: udp.getUser(),
          bizCode: udp.getQueryValue('moduleCode'),
          controlCategory: 3
        }}
      />
    </Layout>
  );
}

export interface IProps {
  style?: CSSProperties;
  gap?: number;
  height?: number;
  list?: Array<{ width: number; src: string }>;
  [x: string]: any;
}
